<template>
	<view class="person_info">
		<view class="info_one">
			<view class="header_img" @click="uploadImage">
				<view class="left">头像</view>
				<view class="right">
					<image :src="avtar?avtar:userinfo.avatar" mode="aspectFill"></image>
					<view class="icon">
						<u-icon name="arrow-right" color="#BEBEBE" size="28"></u-icon>
					</view>
				</view>
			</view>
			<view class="phone" @click="phoneBtn">
				<view class="left">手机号</view>
				<view class="right">
					<view class="txt">{{userinfo.mobile}}</view>
					<view class="icon">
						<u-icon name="arrow-right" color="#BEBEBE" size="28"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="info_two">
			<view class="nav_list" @click="realBtn">
				<view class="left">
					<image src="@/static/images/info_icon1.png" mode=""></image>
					<text>实名认证</text>
				</view>
				<view class="right">
					<view class="txt" v-if="userinfo.is_certification==1">去认证</view>
					<view class="txt color" v-else>已认证</view>
					<u-icon name="arrow-right" color="#BEBEBE" size="28"></u-icon>
				</view>
			</view>
			<view class="nav_list" @click="bankBtn">
				<view class="left">
					<image src="@/static/images/info_icon2.png" mode=""></image>
					<text>银行账号认证</text>
				</view>
				<view class="right">
					<view class="txt" v-if="userinfo.openingbank_name==''">去绑定</view>
					<view class="txt" v-else>已绑定</view>
					<u-icon name="arrow-right" color="#BEBEBE" size="28"></u-icon>
				</view>
			</view>
			<view class="nav_list" @click="networkBtn" v-if='userinfo.is_ht==1'>
				<view class="left">
					<image src="@/static/images/info_icon3.png" mode=""></image>
					<text>网络交易协议</text>
				</view>
				<view class="right">
					<view class="txt" v-if="userinfo.is_contract==1">去签署</view>
					<view class="txt" v-else>已签署</view>
					<u-icon name="arrow-right" color="#BEBEBE" size="28"></u-icon>
				</view>
			</view>
			<view class="nav_list" @click="payCodeBtn">
				<view class="left">
					<image src="@/static/images/info_icon4.png" mode=""></image>
					<text>收款码设置</text>
				</view>
				<view class="right">
					<view class="txt" v-if="userinfo.wx_img=='' && userinfo.zfb_img==''">未设置</view>
					<view class="txt" v-else>已设置</view>
					<u-icon name="arrow-right" color="#BEBEBE" size="28"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	// const plugin = uni.requireNativePlugin('Pdf-Plugin')
	export default {
		data() {
			return {
				avtar:'',
			};
		},
		computed:{
			...mapState({
				userinfo: state => state.userinfo
			}),
		},
		methods:{
			uploadImage(){
				var that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						that.$tips.showLoading('上传中')
						const uploadTask = uni.uploadFile({
							url: that.$baseVal.baseUrl+'/api/Common/upload',
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								'token': uni.getStorageSync('token')
							},
							formData: {
								'type':'avatar'
							},
							success: function(uploadFileRes) {
								var res = JSON.parse(uploadFileRes.data)
								that.avtar = res.data.fullurl
								that.headerInfo(that.avtar)
							}
						});
					},
					error: function(e) {
						// console.log(e);
					}
				})
			},
			// 
			headerInfo(url){
				var that = this
				var params = {
					avatar:url
				}
				that.$httpApi.userProfile(params).then((res)=>{
					that.$tips.hideLoading()
					if(res.code==1){
						that.$tips.showToast('修改成功')
					}
				})
			},
			// 实名认证
			realBtn(){
				if(this.userinfo.is_certification==1){
					uni.navigateTo({
						url:'/pages/person/person_real_name'
					})
				}else{
					uni.navigateTo({
						url:'/pages/person/person_real'
					})
				}
			},
			// 修改手机号
			phoneBtn(){
				uni.navigateTo({
					url:'/pages/person/person_info_phone'
				})
			},
			// 银行卡
			bankBtn(){
				if(this.userinfo.openingbank_name==''){
					uni.navigateTo({
						url:'/pages/person/person_bankcard_revise'
					})
				}else{
					uni.navigateTo({
						url:'/pages/person/person_bankcard'
					})
				}
			},
			// 网络交易协议
			networkBtn(){
				let that = this
				if(that.userinfo.is_contract==1){
					uni.navigateTo({
						url:'/pages/person/person_network'
					})
				}else{
					that.$tips.showLoading('加载中')
					that.$httpApi.userHetong().then((res)=>{
						that.$tips.hideLoading()
						if(res.code==1){
							var item = {
								name: 'pdf预览',
								fileSrc: res.data.link,
								isFileDown: true
							}
							uni.navigateTo({
								url: "/pages/common/fileView",
								success: (ress) => {
									// 通过eventChannel向被打开页面传送数据
									ress.eventChannel.emit("dataFun", {
										data: item,
									});
								},
							});
						}
					})
				}
			},
			// 收款码设置
			payCodeBtn(){
				uni.navigateTo({
					url:'/pages/person/person_paycode'
				})
			},
		}
	}
</script>

<style lang="less">
	.person_info{
		width: 100%;
		padding-top: 24rpx;
		.info_one{
			width: 100%;
			padding: 0 32rpx;
			background: #fff;
			.header_img{
				width: 100%;
				height: 150rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					width: 200rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #222222;
				}
				.right{
					width: calc(100% - 200rpx);
					display: flex;
					align-items: center;
					justify-content: flex-end;
					image{
						display: block;
						width: 96rpx;
						height: 96rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}
				}
			}
			.phone{
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					width: 200rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #222222;
				}
				.right{
					width: calc(100% - 200rpx);
					display: flex;
					align-items: center;
					justify-content: flex-end;
					.txt{
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #888888;
						margin-right: 20rpx;
					}
				}
			}
		}
		// 
		.info_two{
			width: 100%;
			margin-top: 24rpx;
			padding: 20rpx 32rpx;
			background: #fff;
			.nav_list{
				width: 100%;
				height: 100rpx;
				padding: 40rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					display: flex;
					align-items: center;
					image{
						display: block;
						width: 40rpx;
						height: 40rpx;
					}
					text{
						padding-left: 24rpx;
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #222222;
					}
				}
				.right{
					display: flex;
					align-items: center;
					.txt{
						padding-right: 24rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #888888;
					}
					.color{
						color: #26C281;
					}
				}
			}
		}
	}
</style>
